<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script>
<!--
var x=0
function main() {
	x=0	// starting position of the clipping window
	d=-5	// we change the clipping by 5 pixels with every step
	clipit()	// we clip the picture
	vlay.rect.style.visibility="visible"	//we show the picture that was invisible earlier
}
function clipit() {
	vlay.rect.vclip(x,300,x+50,0)	// we clip the layer
	if (x%385==0)d=-d	// if the window position is on top or on bottom (0 or 385 - the rest from division by 385 will then equal to zero), we change the direction of window movement
	x+=d	// we compute the next window position
	setTimeout("clipit()",1)	//	we call the clipping again
}
//-->
</script>
<style type="text/css">
<!--
	div { font-family: "Trebuchet MS", "MS Sans Serif", "Arial CE", Arial, "Helvetica CE", Helvetica, sans-serif; font-size: 13px; line-height: 20px; color:#DDDDFF; }
	#rect { position: absolute; width: 280px; height: 435px; top: 15px; left: 490px; visibility: hidden; }
	#rectback { position: absolute; width: 280px; height: 435px; top: 15px; left: 490px; }
	#tekst { position: absolute; width: 450px; zIndex: 2; border-width: 1px; border-style: solid; border-color: #DDDDFF; padding: 10px; top: 45px; }
	#head { position: absolute; top: 10px; }
//-->
</style>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="head"><a href="http://alladyn.art.pl"><img src="../img/docs_exhead_eng.gif" width="450" height="35" alt="" border="0"></a></div>
<div id="tekst">
<div class="content">
	<span class="b">Example 4.2.2</span><br />
	Simple scroll that uses <span class="b">vclip</span>.<br /><br />
	This script clips a color image, which is located over the same image in gray scale. When we clip, we create the "window" in which we will see the layer containing color image.
	<br /><br />
</div>
<div class="ex1">
	x=0	<span class="ec">// starting position of the clipping window</span><br />
	d=-5	<span class="ec">// we change the clipping by 5 pixels with every step</span><br />
	clipit()	<span class="ec">// we clip the picture</span><br />
	vlay.rect.style.visibility="visible"	<span class="ec">// we show the picture that was invisible earlier</span><br />
	function clipit() {<br />
	&nbsp;&nbsp;&nbsp;&nbsp;vlay.rect.vclip(x,300,x+50,0)	<span class="ec">// we clip the layer</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;if (x%385==0)d=-d	<span class="ec">// if the window position is on top or on bottom (0 or 385 - the rest from division by 385 will then equal to zero), we change the direction of window movement</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;x+=d	<span class="ec">// we compute the next window position</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("clipit()",1)	<span class="ec">// we call the clipping again</span><br />
	}
</div>
<div class="content">
	<br />
	<a href="javascript:history.back()">Back</a>
</div>
</div>
<div id="rectback"><img src="../img/docs_ex422b.jpg" width="280" height="435" alt="" border="0"></div>
<div id="rect"><img src="../img/docs_ex422a.jpg" width="280" height="435" alt="" border="0"></div>
</body>
</html>